<template>
	<custom-nav :showBackArrow="true" :title="'注销账号'"></custom-nav>
	<view class="page-setting" :style="pagePaddingTop">
		<view class="box-icon-caution">
			<image class="icon-caution" src="/static/caution@3x.png"></image>
		</view>
		<view class="tip-cancellation">账户注销，以下信息将被清空且无法找回</view>
		<view class="wrap-basic">
			<view class="wrap-basic-item">
				1.身份、账号信息
			</view>
			<view class="wrap-basic-item">
				2.交易记录
			</view>
			<view class="wrap-basic-item">
				3.个人隐私信息
			</view>
			<view class="wrap-basic-item">
				4.红包、金币
			</view>
			<view class="wrap-basic-item">
				5.会员红包、奖励金
			</view>
		</view>
		<view class="tip-wenxin">温馨提示</view>
		<view class="cont-wenxin">请先确保所有交易已完结且无纠纷，账号删除后的历史交易可能产生的资金退回权益等将视作自动放弃。</view>
		<view class="box-bottom">
			<view class="btn-confirm" @tap="confirmCancellation">确认注销</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"
	import CustomNav from "@/components/custom-nav/index.vue"
	import CustomModal from "@/components/custom-modal/index.vue"
	let navHeightInfo = getNavHeightTop();
	const pagePaddingTop = ref({
		"paddingTop": (navHeightInfo.navTotalHeight + uni.upx2px(48)) + 'px'
	})

	const confirmCancellation = (res) => {
		if (res) {
			uni.clearStorage()
			uni.reLaunch({
				url: '/pages/login/index'
			})
		}
	}
</script>

<style lang="less" scoped>
	.page-setting {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding-bottom: 154rpx;
		background-color: #182836;
		font-size: 30rpx;
		// font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 30rpx;
		box-sizing: border-box;

		.box-icon-caution {
			position: relative;
			width: 238rpx;
			height: 238rpx;
			margin: 0 auto 40rpx;

			// &::before {
			// 	position: absolute;
			// 	content: " ";
			// 	width: 206rpx;
			// 	height: 54rpx;
			// 	background: #FFFFFF;
			// 	opacity: 0.1;
			// 	border-radius: 50%;
			// 	bottom: 0%;
			// 	left: 50%;
			// 	transform: translate(-50%, -50%);
			// 	-webkit-transform: translate(-50%, -50%);
			// }

			.icon-caution {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 2;
			}
		}

		.tip-cancellation {
			position: relative;
			width: 500rpx;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 56rpx;
			text-align: center;
			box-sizing: border-box;
			margin: 0 auto;
		}

		.wrap-basic {
			position: relative;
			width: 670rpx;
			padding: 32rpx 40rpx;
			background: #213343;
			border-radius: 40rpx;
			margin: 60rpx auto 0;
			box-sizing: border-box;

			.wrap-basic-item {
				position: relative;
				width: 100%;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				height: 68rpx;
				font-size: 28rpx;
				// font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 68rpx;
				border-bottom: 1px solid rgba(243, 243, 243, 0.1);
				box-sizing: border-box;

				&:last-child {
					border-bottom: none;
				}
			}
		}

		.tip-wenxin {
			position: relative;
			width: 100%;
			font-size: 28rpx;
			// font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 28rpx;
			padding: 48rpx 48rpx 28rpx;
			box-sizing: border-box;
		}

		.cont-wenxin {
			position: relative;
			width: 670rpx;
			padding: 40rpx;
			background: #213343;
			border-radius: 40rpx;
			box-sizing: border-box;


			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 42rpx;
			margin: 0 auto;
		}


		.box-bottom {
			position: fixed;
			width: 100%;
			height: 140rpx;
			bottom: 0;
			padding-top: 20rpx;
			background-color: #182836;
			box-sizing: border-box;

			.btn-confirm {
				position: relative;

				width: 670rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				// background: linear-gradient(0deg, #10A383 0%, #48C282 100%);

				background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
				border-radius: 44rpx;

				font-size: 32rpx;
				// font-family: PingFang SC;
				font-weight: 600;
				color: #182836;
				margin: 0 auto;

			}
		}

	}
</style>